<template>
	<view class="e-detail">
		<view class="bg-fff p-30 br-10 m-b-30">
			<view class="flex">
				<view class="flex_1 title">故障申请{{statusName}}</view>
				<u-tag :text="statusName" :type="formatStatus.type" plain plainFill></u-tag>
			</view>
			<u-divider></u-divider>
			<store-table :titleList="titleList" :dataList="dataList"></store-table>
			<view class="status p-t-30">
				设备状态：<text class="p-l-20 color-D91A1A statustext">{{filterFunction(formData.status)||'fang'}}</text>
			</view>
		</view>
		<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30 p-b-20">
			<view class="reason-title">故障原因</view>
			<view class="reason" style="white-space: pre-line;">{{formData.description}}</view>
			<u-upload v-if="formData.fileList" :fileList="formData.fileList" name="img" multiple
				:maxCount="formData.fileList.length" :previewFullImage="true" :deletable="false" width="60"
				height="60"></u-upload>
		</view>
		<view class="bg-fff p-x-30 p-y-14 br-10 m-b-30">
			<person-detail :infoList="infoList" :info="formData"></person-detail>
		</view>
		<!-- 返厂信息 -->
		<view v-if="formData.maintainDTO">
			<view class="back-title">返厂数据</view>
			<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30">
				<person-detail :infoList="backList" :info="formData.maintainDTO"></person-detail>
			</view>
			<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30 p-b-20">
				<view class="reason-title">返厂原因</view>
				<view class="reason">{{formData.maintainDTO.reason}}</view>
			</view>
			<u-gap height="40"></u-gap>
		</view>
	</view>
</template>

<script>
	import {
		uploadbaseUrl
	} from '@/request/request.js'
	export default {
		data() {
			return {
				formData: {
					status: '',
					description: '',
					instrumentsId: '',
					creatName:'',
					phone:'',
					declareDate:'',
					fileList: []
				},
				infoList: [{
						name: '申报人',
						key: 'creatName'
					},
					{
						name: '联系方式',
						key: 'phone'
					},
					{
						name: '申报日期',
						key: 'declareDate'
					},
				],
				backList: [{
						name: '寄出时间',
						key: 'mailDate'
					},
					{
						name: '寄回时间',
						key: 'mailBackDate'
					},
					{
						name: '厂家联系人',
						key: 'factoryContacts'
					},
					{
						name: '联系方式',
						key: 'contactInformation'
					},
				],
				titleList: [{
						name: '器具名称',
						span: '7'
					},
					{
						name: '准确度',
						span: '5'
					},
				],
				tablecanList: [{
						name: '申请仪器',
						key1: 'name'
					},
					{
						name: '型号规模',
						key1: 'modelNumber'
					},
					{
						name: '准确度',
						key1: 'devicePrecision'
					},
					{
						name: '制造厂商',
						key1: 'manufacturer'
					},
					{
						name: '出厂编号',
						key1: 'factoryNumber'
					},
				],


				dataList: [{
					list: [{
							value: ''
						},
						{
							value: ''
						},
					],
					content: [{
							label: '申请仪器',
							value: ''
						},
						{
							label: '型号规模',
							value: ''
						},
						{
							label: '准确度',
							value: ''
						},
						{
							label: '制造厂商',
							value: ''
						},
						{
							label: '出厂编号',
							value: ''
						},
					],
				}],
				statusName: '',
				type: '',
				equipList: []
			}
		},
		onLoad(options) {
			this.statusName = options.statusName
			// this.type = options.type

			this.getDetail(options.id)
		},
		computed: {
			formatStatus() {
				if (this.statusName == '已处理') {
					return {
						type: 'success',
					}
				} else if (this.statusName == '处理中') {
					return {
						type: 'warning',
					}
				}
				return {
					type: 'error',
				}
			}
		},
		methods: {
			// 过滤数据转化
			filterFunction(value) {
				let resolveData
				switch (value) {
					case 1:
						resolveData = '可正常使用';
						break;
					case 2:
						resolveData = '无法使用';
						break;
					case 3:
						resolveData = '返厂维修';
						break;
					default:
						resolveData = '';
				};
				return resolveData
			},
			// 获取详情
			getDetail(id) {
				this.$api.gettroubleDetail({
					id: id
				}).then(res => {
					this.formData =res.data
					this.formData.description = res.data.description.replaceAll("/r/n", "<br>")
					if (this.formData.maintainDTO) {
						this.formData.maintainDTO.reason = res.data.maintainDTO.reason.replaceAll("/r/n", "<br>")
					}
					this.equipList = [res.data.instrumentsDTO]
					let files = JSON.parse(JSON.stringify(res.data.troubleFiles))
					let arr = []
					if (res.data.troubleFiles && res.data.troubleFiles.length > 0) {
						this.formData.fileList = files.map((item) => {
							item.url = `${uploadbaseUrl}/${item.uploadName}`
							return item
						})
					}
					this.formData.troubleFiles = arr
					this.equipList.map((resdata, index) => {
						this.tablecanList.map((item) => {
							this.dataList[index].list[0].value = `${resdata.name}(${resdata.modelNumber})`
							this.dataList[index].list[1].value = `${resdata.devicePrecision}`
							this.dataList[index].content.map((items) => {
								if (item.name == items.label) {
									items.value = resdata[item.key1]
								}
							})
						})
					})

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.e-detail {
		padding: 30rpx;
		background: linear-gradient(#0e64fe, #F7F8FA); //从上到下
		height: 200px;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.reason-title {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		padding-bottom: 20rpx;
	}

	.reason {
		white-space: pre-line;
		font-size: 22rpx;
		color: #666666;
		line-height: 36rpx;
		background: #F7F9FC;
		border-radius: 5rpx;
		padding: 20rpx 10rpx;
	}

	.status {
		font-size: 26rpx;
		color: #666666;
	}

	.statustext {
		font-size: 26rpx;
	}

	.back-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding-left: 20rpx;
		border-left: 4rpx solid #0e64fe;
		margin-bottom: 30rpx;
	}
</style>